<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
import api from "@/api/index.js";
import {ElMessage} from "element-plus";

const loginData = reactive({
  username: '',
  password: ''
})

const loginRules = reactive({
  username: [
    {required: true, message: '用户名为1~16字符之间（中文、字母、数字或下划线）', min:1, max:16, trigger:'blur'}
  ],
  password: [
    {required: true, message: '密码为5~18位字母、数字和符号', min: 5, max: 18, trigger: 'blur'},
    // { min: 6, max: 18, message: '密码字符为6~18之间', trigger: 'blur' },
  ],
})

const router = useRouter();

const login_request = async () => {
  let form_obj = JSON.parse(JSON.stringify(loginData));
  console.log(form_obj)
  let result = await api.login(form_obj);
  console.log(result.data)
  if (result) {
    ElMessage({
      message: '登录成功',
      type: 'success',
    })

    let tokenObj = { token: " isLogin", startTime: new Date().getTime() };
    window.localStorage.setItem("isLogin", JSON.stringify(tokenObj));
    localStorage.setItem("username", JSON.parse(JSON.stringify(loginData.username)));
    console.log(result);

    // 登录验证成功跳转到目标路径
    await router.push({name: 'Dashboard'});

  } else {
    ElMessage.error('账号或密码错误！！！登录失败！！！')
  }
}


</script>

<template>
  <div class="back_ground">
    <el-row class="login-page">
       <el-col :span="5" :offset="18" class="form">
        <!-- 登录表单 -->
        <el-form ref="form" size="large" autocomplete="off" :model="loginData" :rules="loginRules">
          <el-form-item>
            <h1>登录</h1>
          </el-form-item>
          <el-form-item prop="username">
            <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="loginData.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="loginData.password"></el-input>
          </el-form-item>
          <el-form-item class="flex">
            <div class="flex">
              <el-checkbox>记住我</el-checkbox>
              <el-link type="primary" :underline="false">忘记密码？</el-link>
            </div>
          </el-form-item>
          <!-- 登录按钮 -->
          <el-form-item>
            <el-button class="button" type="primary" auto-insert-space @click="login_request">登录</el-button>  <!-- @keyup.enter.native="Home" -->
          </el-form-item>
          <el-form-item>
            <!-- 跳转到注册界面 -->
            <router-link to="/register">注册</router-link>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
/* 样式 */
.back_ground {
  width: 100%;
  height: 100%;
  background: url('@/assets/login_bg.png') no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.login-page {
  width: 100%;
  height: 100%;
}
.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  user-select: none;
}
.button {
  width: 100%;
}

.flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

</style>
